import React from "react";
import "../pagesCss/UserProfileCss.css";

function VideoUpload({ videos }) {
  return (
    <section className="liked-videos">
      <h2>Upload Video</h2>
      <div className="video-list">
        {videos.map((video) => (
          <div key={video.videoId} className="video-card">
            <video width="100%" controls poster={video.thumbnail}>
              <source src={video.url} type="video/mp4" />
              Your browser does not support the video tag.
            </video>
            <h3>{video.title}</h3>
            <p>{video.description}</p>
          </div>
        ))}
      </div>
      <button className="upload-button">Upload Video</button>
    </section>
  );
}

export default VideoUpload;
